其他
【每日一练】96—Bootstrap实现一个响应式卡片效果
作者 | 杨小爱
写在前面
今天这个练习是使用Bootstrap实现的一个卡片效果,关于这个卡片式的效果,我们在前面也分享过,主要是用纯CSS实现。
当然,用什么方式实现自己想要的效果,主要是根据自己当前开发项目的需求来,同一个效果,实现的方式有多种,选择合适的就可以了,因此,我们在练习时,需要多尝试不同的实现方式,这样可以为实际开发项目时,找到合适的方式。
现在,我们就来看一下今天这个练习的最终效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>【每日一练】96—Bootstrap实现一个响应式卡片效果</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
</head>
<body>
<section class="section-team">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-md-8 col-lg-6">
<div class="header-section">
<h3 class="small-title">技术团队</h3>
<h2 class="title">欢迎关注我们的公众号【web前端开发】</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4 col-xl-3">
<div class="single-person">
<div class="person-image">
<img src="images/01.png" alt="">
<span class="icon">
<i class=" fa fa-address-card"></i>
</span>
</div>
<div class="person-info">
<h3 class="full-name">杨小爱</h3>
<span class="speciality">Web开发设计师 & UI设计师</span>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 col-xl-3">
<div class="single-person">
<div class="person-image">
<img src="images/02.png" alt="">
<span class="icon">
<i class=" fa fa-address-card"></i>
</span>
</div>
<div class="person-info">
<h3 class="full-name">张三</h3>
<span class="speciality">Web开发设计师 & UI设计师</span>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 col-xl-3">
<div class="single-person">
<div class="person-image">
<img src="images/03.jpg" alt="">
<span class="icon">
<i class=" fa fa-address-card"></i>
</span>
</div>
<div class="person-info">
<h3 class="full-name">李四</h3>
<span class="speciality">Web开发设计师 & UI设计师</span>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 col-xl-3">
<div class="single-person">
<div class="person-image">
<img src="images/04.jpg" alt="">
<span class="icon">
<i class=" fa fa-address-card"></i>
</span>
</div>
<div class="person-info">
<h3 class="full-name">赵六</h3>
<span class="speciality">Web开发设计师 & UI设计师</span>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
p,a,h1,h2,h3,h4 {
margin: 0;
padding: 0;
}
.section-team {
font-family: "Poppins", sans-serif;
padding: 80px 0;
}
.section-team .header-section {
margin-bottom: 50px;
}
.section-team .header-section .small-title {
margin-bottom: 25px;
font-size: 16px;
font-weight: 500;
color: #3e64ff;
}
.section-team .header-section .title {
font-weight: 700;
font-size: 45px;
}
.section-team .single-person {
margin-top: 30px;
padding: 30px;
background-color: #f6f9ff;
border-radius: 5px;
}
.section-team .single-person:hover {
background: linear-gradient(to right, #016cec, #00b5f7);
}
.section-team .single-person .person-image {
position: relative;
margin-bottom: 50px;
border-radius: 50%;
border: 4px dashed transparent;
transition: padding .3s;
}
.section-team .single-person:hover .person-image {
padding: 12px;
border: 4px dashed #fff;
}
.section-team .single-person .person-image img {
width: 100%;
border-radius: 50%;
}
.section-team .single-person .person-image .icon {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,50%);
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: linear-gradient(to right, #016cec, #00b5f7);
color: #fff;
border-radius: 50%;
font-size: 24px;
}
.section-team .single-person:hover .person-image .icon {
background: none;
background-color: #fff;
color: #016cec;
}
.section-team .single-person .person-info .full-name {
margin-bottom: 10px;
font-size: 28px;
font-weight: 700;
}
.section-team .single-person .person-info .speciality {
text-transform: uppercase;
font-size: 14px;
color: #016cec;
}
.section-team .single-person:hover .full-name,
.section-team .single-person:hover .speciality {
color: #fff;
}
写在最后
以上就是我们今天【每日一练】的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号